<template>
	<view>
		<!-- 放置商品图片 -->
		<view class="pic">
			<image :src="goods.image" mode="widthFix"></image>
		</view>
		<!-- 价格 +标题-->
		<view class="box1">
			<view class="price">
				<text>￥{{goods.salesprice}}</text>
				<text class="market">￥{{goods.marketprice}}</text>
			</view>
			<view class="name">{{goods.name}}</view>
		</view>
		<!-- 详情+ -->
		<view class="line"></view>
		
		<view class="box2">
			<view>货号:{{goods.goodsno}}</view>
			<view>库存:{{goods.stock}}</view>
		</view>
		<view class="line"></view>
		<view class="box3">
			<view>商家: {{goods.author}}</view>
			<view>详情: {{goods.description}}</view>
		</view>
		<view class="line"></view>
		<view class="addCart">
			<button  type="warn" @click="addcart()">加入购物车</button>
		</view>
		<view class="title">全部评论({{goods.remarknums}})</view>
		<!-- 评论的区域 -->
		<view class="comments">
			<!-- 评论人 -->
			<view class="comment" v-for="(comment) in comments_list">
				<view class="left">
					<image :src="comment.user.userImage" class="headImg" mode="widthFix"></image>
				</view>
				<view class="middle">
					<view class="username">{{comment.user.username}}</view>
					<view class="content">{{comment.content}}</view>
					<view class="uptime">
						<text>{{comment.remarktime}}</text>
						<text style="margin-left: 30px;">👍{{comment.score}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" @confirm="confirm" 
		ref="uModal" 
		:asyncClose="true" 
		:content="content"
		showCancelButton="true"
		cancelColor="#b50e03"
		@cancel="close">
			
		</u-modal>
	</view>
	
</template>

<script>
	export default {
		data(){
			return{
				content:"确定加入购物车",
				show:false,
				goods:{},
				comments_list:[]
			}
		},
		onLoad(option) {
			//从上一个页面加载过来
			console.log(option.id),
			uni.request({
				url:"http://localhost:6061/goods/"+option.id,
				method:"GET",
				header:{
					'Authorization':uni.getStorageSync("token")
				},
				success:(res) => {
					console.log(res.data.data);
					this.goods = res.data.data;
					this.comments_list = res.data.data.mallRemarks;
				}
			})
		},
		methods:{
			addcart(){
				this.show = true;
			},
			close(){
				this.show = false;
			},
			confirm() {
				this.show = false;
				//发送添加到购物车
				uni.request({
					url: 'http://localhost:6061/cart/addCart', //url地址
					data: {
						userid:uni.getStorageSync("uid"),
						goodsid:this.goods.id,
						price:this.goods.salesprice,
						nums:1
					},
					method:"POST", //请求方式
					header: {
						"content-type":"application/json",
						'Authorization':uni.getStorageSync("token")
					},
					success: (res) => {
						console.log(res);
					}
				});
			}
		}
	}
</script>

<style>
	.pic{
		width: 100%;
	}
	.pic image{
		display: block;
		width: 90%;
		margin: 0 auto;
	}
	.box1{
		padding: 10px;
	}
	.price{
		line-height: 80rpx;
		color: #b50e03;
		font-size: 24px;
	}
	.market{
		color: #C0C0C0;
		font-size: 12px;
		text-decoration: line-through;
		margin-left: 20rpx;
	}
	.name{
		font-size: 18px;
		color: #333333;
		line-height: 60rpx;
	}
	.line{
		height: 10rpx;
		width: 750rpx;
		background: #eee;
	}
	.box2,.box3{
		padding:0 10px;
		font-size: 32rpx;
		line-height: 60rpx;
	}
	.addCart{
		position: fixed;
		bottom: 0px;
		right: 0px;
	}
	.comments,.title{
		padding:0 10px;
	}
	.headImg{
		width: 150rpx;
		border-radius: 50%;
	}
	.comments>view{
		border-bottom: 1px solid #ccc;
	}
	.comment{
		display: flex;
	}
	.left{
		width: 20%;
	}
	.middle{
		width: 70%;
		padding: 0 10px;
	}
	.uptime{
		color: #CCCCCC;
		font-size: 24rpx;
	}
	.middle view{
		margin-bottom: 20rpx;
	}
	
</style>
